<template>
  <div class="offerforsale">
    <el-row>
      <el-col :span="16">
        <div class="grid-content bg-purple-dark">
          <el-form ref="form" :model="form" label-width="80px" :rules="rules">
            <el-form-item label="品牌" prop="brand">
              <el-input v-model="form.brand" :placeholder="carInfo.car.brand"></el-input>
            </el-form-item>

            <el-form-item label="价格" prop="price">
              <el-input v-model="form.price" :placeholder="carInfo.car.price">
                <template slot="append">万元</template>
              </el-input>
            </el-form-item>
            <el-form-item label="上牌时间">
              <el-col :span="11">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="form.card_time"
                  style="width: 100%"
                ></el-date-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="行驶里程" prop="mile">
              <el-input v-model.number="form.mile">
                <template slot="append">公里</template>
              </el-input>
            </el-form-item>
            <el-form-item label="排量">
              <el-input v-model="disp" :placeholder="carInfo.car.displacement">
                <template slot="append"
                  ><i class="el-icon-refresh" v-if="isDisplacement" @click="setDisplacement"> T </i></template
                >
                <template slot="append"
                  ><i class="el-icon-refresh" v-if="!isDisplacement" @click="setDisplacement"> L </i></template
                ></el-input
              >
            </el-form-item>
            <el-form-item label="变速箱">
              <el-radio-group v-model="form.gearbox">
                <el-radio-button label="手动"></el-radio-button>
                <el-radio-button label="自动"></el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="所在城市">
              <div>
                <CityList @updataname="updataname"></CityList>
              </div>
            </el-form-item>
            <el-form-item label="排放标准">
              <el-radio-group v-model="form.emission_standard">
                <el-radio-button label="国三"></el-radio-button>
                <el-radio-button label="国四"></el-radio-button>
                <el-radio-button label="国五"></el-radio-button>
                <el-radio-button label="国六"></el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="车辆类型" prop="model">
              <el-radio-group v-model="form.model">
                <el-radio-button label="SUV"></el-radio-button>
                <el-radio-button label="轿车"></el-radio-button>
                <el-radio-button label="跑车"></el-radio-button>
                <el-radio-button label="面包车"></el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="转手次数" prop="transfer_times">
              <el-input v-model.number="form.transfer_times"></el-input>
            </el-form-item>
            <el-form-item label="事故情况" prop="accident_situation">
              <el-radio-group v-model="form.accident_situation">
                <el-radio-button label="无事故"></el-radio-button>
                <el-radio-button label="轻微"></el-radio-button>
                <el-radio-button label="严重"></el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="座位数" prop="seats">
              <el-input v-model.number="form.seats"></el-input>
            </el-form-item>
            <el-form-item label="其他说明" prop="other">
              <el-input v-model="form.other"></el-input>
            </el-form-item>
            <el-form-item label="上传图片" prop="seats">
              <PubImg @updata="updata" :key="carInfo"></PubImg>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">提交</el-button>
              <el-button @click="$emit('updata')">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CityList from '@/views/components/ascader.vue'
import PubImg from '@/views/components/publish-img.vue'
import rules from './rules2'
import { alterSelf } from '@/api/cart'
export default {
  name: 'CarInfo',
  components: { CityList, PubImg },
  props: ['carInfo'],
  data() {
    return {
      imglist: [],
      self_car_id: this.carInfo.id,
      city: '',
      disp: '', // pailiang
      isDisplacement: true, // true wei T
      rules: rules,
      form: {
        //自营车辆发布id
        self_car_id: '',
        // ：品牌
        brand: '',
        type: '', // 型号
        // 价格
        price: '',
        // ：上牌事件
        card_time: '',
        // ：行驶里程
        mile: '',
        displacement: '', //排量
        // 排放标准
        emission_standard: '',
        // ：变速
        gearbox: '',
        transfer_times: '', // 转手次数
        // ：城市
        city_name: '',
        // ：车辆类型
        model: '',
        seats: '', // 座位数
        // ：事故情况
        accident_situation: '',
        // ：其他
        other: ''
      }
    }
  },
  watch: {
    // 排量
    disp: function (value) {
      this.form.displacement = this.isDisplacement ? value + 'T' : value + 'L'
    },
    // 排量
    isDisplacement: function (value) {
      this.form.displacement = value ? this.disp + 'T' : this.disp + 'L'
    },
    // 上牌时间
    'form.card_time': {
      deep: true,
      handler: function (value, old) {
        console.log(value, old)
        const year = new Date(value).getFullYear()
        let month = new Date(value).getMonth() + 1
        const day = new Date(value).getDate()
        this.form.card_time = year + '-' + month + '-' + day
      }
    }
  },
  methods: {
    updata(img) {
      this.imglist = img
      console.log(this.imglist)
    },
    updataname(name) {
      this.form.city_name = name
    },
    //切换TL
    setDisplacement() {
      this.isDisplacement = !this.isDisplacement
    },
    async onSubmit() {
      this.form.self_car_id = this.carInfo.id

      const keys = Object.keys(this.form)
      keys.forEach(item => {
        this.imglist.append(item, this.form[item])
      })
      console.log(this.form)
      const res = await alterSelf(this.imglist)
      console.log(res)
      if (res.data.statu == 200) {
        this.$emit('updata')
        this.$message({
          showClose: true,
          message: '恭喜你，修改成功',
          type: 'success'
        })
      } else {
        this.$message.warning(res.data.msg)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.grid-content {
  padding: 20px;
}
.offerforsale {
  background-color: #fff;
  margin-top: 20px;
}
/deep/.cascader {
  span {
    padding: 0 0 0 10px;
  }
}
.el-icon-refresh {
  color: red;
  font-size: 30px;
  cursor: pointer;
}
</style>
